<template>
    <div class="swiper-container" id="mySwiper" ref="mySwiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="item in swiperData" :key="item.id">
                <img :src="require('.' + item.imgUrl)" />
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/css/swiper.min.css";

export default {
    name: "Swiper",
    props: ["swiperData"],
    watch: {
        swiperData: {
            immediate: true,
            handler() {
                // 为什么要在watch中初始化swiper?为什么要使用$nextTick?
                // 因为在mounted中初始化swiper, 会导致swiper的dom元素还没有渲染出来, 无法初始化swiper, 所以要在watch中初始化swiper
                /*
                * 为什么要用$refs?
                    + 如果组件中存在多个swiper,所有的swiper类名都是一致的
                    + 如果我们多次new Swiper的时候,使用的都是同一个类,则每个Swiper组件都会受到所有实例化的影响
                    + 我们实例化Swiper的时候 不要再通过类来确定某个Swiper容器,而是通过ref来确定某个Swiper容器
                    + 因为ref代表某个容器,我们在实例化Swiper的时候,就获取到ref对应容器的真实DOM了
                */

                if (this.swiperData.length === 0) return; // 如果没有数据,则不初始化swiper
                this.$nextTick(() => {
                    new Swiper(this.$refs.mySwiper, {
                        // 点击分页器切换后，自动切换的时间间隔
                        autoplay: {
                            delay: 2000, // 2秒切换一次
                            stopOnLastSlide: false, // 最后一张后是否停止
                            disableOnInteraction: false, // 用户操作swiper之后，是否禁止autoplay。默认为true：停止。
                        },
                        loop: true, // 循环模式选项
                        // 如果需要分页器
                        pagination: {
                            el: ".swiper-pagination",
                        },
                        // 如果需要前进后退按钮
                        navigation: {
                            nextEl: ".swiper-button-next",
                            prevEl: ".swiper-button-prev",
                        },
                    });
                });
            },
        },
    },
};
</script>

<style scoped></style>
